import styled from "styled-components";

export const AlbumWrap = styled.div`
  height: 184px;
  padding: 0 16px;
  background: #f5f5f5;
  border: 1px solid #fff;
  position: relative;
  .carLeft {
    display: block;
    position: absolute;
    width: 20px;
    height: 40px;
    top: 45%;
    left: 2px;
    transform: translateY(-50%);
    background-position: 0 -20px;
    cursor: pointer;
  }
  .carRight {
    display: block;
    position: absolute;
    width: 20px;
    height: 40px;
    top: 45%;
    right: 2px;
    transform: translateY(-50%);
    background-position: -32px -20px;
    cursor: pointer;
  }
  .album-banner {
    overflow: hidden;
    margin-top: 30px;
    ul {
      height: 150px;
      .album-banner-bgi {
        float: left;
        width: 118px;
        height: 150px;
        margin-left: 11px;
        display: inline;
        cursor: pointer;
        .blurBg {
          background-position: 0 -570px;
          height: 100px;
          background-repeat: no-repeat;
          :hover .blurPicUrl .iconPlay {
            display: block;
          }
          .blurPicUrl {
            cursor: pointer;
            position: relative;
            width: 100px;
            height: 100px;
            .b-hov {
              position: absolute;
              background-position: 0px 0px;
              width: 100px;
              height: 100px;
              top: 0;
              left: 0;
              text-indent: -9999px;
            }
            .iconPlay {
              display: none;
              position: absolute;
              left: 72px;
              width: 22px;
              height: 22px;
              background: url(${require("@/assets/img/iconall.png").default})
                no-repeat 0 9999px;
              background-position: 0 -85px;
              right: 10px;
              bottom: 5px;
              z-index: 6;
              :hover {
                background-position: 0 -110px;
              }
            }
          }

          .art-song {
            display: block;
            font-size: 12px;
            color: #000;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .art-name {
            display: block;
            color: #666;
            font-size: 12px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }
`;
